<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{height: 100%;margin: 0px;font:12px Arial;}
      .circle{border-radius: 50%;border: solid 1px silver;width: 50px;height: 50px;padding: 3px;text-align: center;line-height: 25px;max-width: 50px;color:#fff;}
      .showtitle{background:#393;width:150px;height:30px;line-height:30px;color:#fff;border-radius:5px;padding-left:5px;}
      .showtitle i{font-size:16px;}
      .showcontent{background:#62ab00;width:300px;font-size:12px;margin-left:-80px;border-radius:5px;color:#fff;position:absolute;display:none;bottom:30px;z-index:99;}
   	  .showcontent .p{line-height:30px;padding-left:10px;margin-top:-0px;}
   	  .showcontent i.triangle_i{color:#62ab00;font-size:25px;display:block;width:100%;background:#fff;text-align:center;height:25px;}
   	  .showcontent i.close_i{position: absolute;right: 5px;top:5px;font-size:25px;z-index:99999;}
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <title>高德地图Marker实现聚合效果</title>
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <div id="tip">可以缩放地图，得到缩放级别哦！<br><span id="info"></span></div>
   <script src="./marker0.js"></script>
   <script src="https://webapi.amap.com/maps?v=1.4.1&key=de46cac2667f7b246a14192b88ba619d"></script>
   <script type="text/javascript">
	   $(function(){
			//弹出框关闭
			$('.showtitle').live('click',function(){
				$(this).prev('.showcontent').toggle();
			})
			$('.close_i').live('click',function(){
				$(this).parent().hide();
			})
		})
		//初始化地图容器
   		var map = new AMap.Map('container', {
            resizeEnable: true,
       			zoom: 5,
       			zooms:[4,18],
       			center: [106.49, 34.60]
   		});
	   
	   //设置地图比例尺
	   AMap.plugin(['AMap.Scale'],
		    function(){
		        map.addControl(new AMap.Scale());
		});
	   
	   //添加监听时间，当前缩放级别
	    AMap.event.addListener(map,'zoomend',function(){
	        document.getElementById('info').innerHTML = '当前缩放级别：' + map.getZoom();
	    });
	   
   		var markersTwo;
   		var markersThree;
   		var createMarker = function(data,hide) {
   			var div = document.createElement('div');
   			div.className = 'circle';
   			var r = Math.floor(data.count / 1024);
   			div.style.backgroundColor = hide ?'#393':'#09f';
   			var htmlData='<div>'+data.name+'</div><div>'+data.count+'</div>';
   			div.innerHTML = htmlData;
   			
   			var marker = new AMap.Marker({
   				content: div,
   				title:data.name,
   				position: data.center.split(','),
   				offset: new AMap.Pixel(-24, 5),
   				zIndex: data.count,
   			});
   			marker.subMarkers = [];
   			if(data.name==='山东省'||data.name==='河南省'||data.name==='济南市'||data.name==='天桥区'){
   				marker.setLabel({content:'&larr;请点击',offset:new AMap.Pixel(45,0)})
          		map.setCenter(marker.getPosition());
   			}
   			if(!hide){
   				marker.setMap(map)
   			}
   			 if(data.subDistricts&&data.subDistricts.length){
   				for(var i = 0 ; i<data.subDistricts.length;i+=1){
   					marker.subMarkers.push(createMarker(data.subDistricts[i],true));
   				}
   			} 
   			return marker;
   		}
   		
   		
   		
   		var _onZoomEnd = function(e) {	
   			if (map.getZoom() < 7) {//全国下的省份
   				for (var i = 0; i < markers.length; i += 1) {
   					map.remove(markers[i].subMarkers);
   				}
   				map.add(markers);
   			}else if((map.getZoom() < 9) && (map.getZoom() > 7)){//省份下的市
   				for (var i = 0; i < markersTwo.length; i += 1) {
   					map.remove(markersTwo[i].subMarkers);
   				}
   				map.add(markersTwo);
   			}else if(map.getZoom() < 14 && map.getZoom() > 9){//市下面的区或县
				for (var i = 0; i < markersThree.length; i += 1) {
   					map.remove(markersThree[i].subMarkers);
   				}
				map.add(markersThree);
   			}
   		}
   		var _onClick = function(e) {
   			if(e.target.subMarkers.length){
   			
   				map.add(e.target.subMarkers);
				map.setFitView(e.target.subMarkers);
   				markersTwo=e.target.subMarkers;
   				
   				var subMarkersTwo=e.target.subMarkers;
   		   		for (var j = 0; j < subMarkersTwo.length; j += 1) {
	   		   		AMap.event.addListener(subMarkersTwo[j], 'click', _onClickTwo);
	   		   		AMap.event.addListener(subMarkersTwo[j], 'mouseover', _onMouseoverTwo);
		   			AMap.event.addListener(subMarkersTwo[j], 'mouseout', _onMouseoutTwo);
   		   		} 
   				map.remove(markers)
   			}
   		}
   		
   		
   		var _onMouseover = function(e) {
   			var div = e.target.getContent();
   			div.style.backgroundColor = '#393';
   			e.target.setContent(div);
   		}
   		var _onMouseout = function(e) {
   			var div = e.target.getContent();
   			div.style.backgroundColor = '#09f';
   			e.target.setContent(div);
   		}
   		
   		
   		var _onClickTwo = function(e) {
   			
			if(e.target.subMarkers.length){
   			
   		 	    map.add(e.target.subMarkers);
				map.setFitView(e.target.subMarkers);
				map.setZoom(11);
   		   		
				
				markersThree=e.target.subMarkers;
				
				var subMarkersThree=e.target.subMarkers;
   		   		for (var j = 0; j < subMarkersThree.length; j += 1) {

	   		   		AMap.event.addListener(subMarkersThree[j], 'click', _onClickThree);
	   		   		AMap.event.addListener(subMarkersThree[j], 'mouseover', _onMouseoverThree);
		   			AMap.event.addListener(subMarkersThree[j], 'mouseout', _onMouseoutThree);
   		   			
   		   		}
				
   				map.remove(markersTwo)
   				
   			}
   			
   		}
   		
   		
   		var _onMouseoverTwo = function(e) {
   			var div = e.target.getContent();
   			div.style.backgroundColor = '#09f';
   			e.target.setContent(div);
   		}
   		
   		
   		var _onMouseoutTwo = function(e) {
   			var div = e.target.getContent();
   			div.style.backgroundColor = '#393';
   			e.target.setContent(div);
   		}
   		
   		
   		
   		
		var _onClickThree = function(e) {
   			
			if(e.target.subMarkers.length){
   		 	    map.add(e.target.subMarkers);
				map.setFitView(e.target.subMarkers);
				var subMarkersFour=e.target.subMarkers;
   		   		for (var j = 0; j < subMarkersFour.length; j += 1) {
	   		   		var title = e.target.subMarkers[j].getTitle();
	   	   			var html='<div class="showcontent"><div class="p">公司名称：'+title+'</div><div class="p">联系方式：'+title+'</div><i class="fa triangle_i">&#xf0d7</i><i class="fa close_i">&#xf057</i></div><div class="showtitle"><i  class="fa">&#xf1ba</i>&nbsp;&nbsp;'+title+'</div>';
	   	   			e.target.subMarkers[j].setContent(html);
   		   		}
   				map.remove(markersThree)
   			}
   			
   		}
   		
   		
		var _onMouseoverThree = function(e) {
   			var div = e.target.getContent();
   			div.style.backgroundColor = '#09f';
   			e.target.setContent(div);
   		}
   		var _onMouseoutThree = function(e) {
   			var div = e.target.getContent();
   			div.style.backgroundColor = '#393';
   			e.target.setContent(div);
   		}
   		
   		
   		
   		var markers = []; //province见Demo引用的JS文件
   		for (var i = 0; i < provinces.length; i += 1) {
   			var marker = createMarker(provinces[i]);
   			
   			markers.push(marker);
   			
   			AMap.event.addListener(marker, 'click', _onClick);
   			AMap.event.addListener(marker, 'mouseover', _onMouseover);
   			AMap.event.addListener(marker, 'mouseout', _onMouseout);
   		}
   		map.setFitView();
   		AMap.event.addListener(map, 'zoomend', _onZoomEnd);
			
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
  </body>
</html>